<template>
  <div class="avatar-uploader-box">
    <el-upload
      :action="uploadUrl"
      :limit=1
      list-type="picture-card"
      :accept="accept"
      :auto-upload="true"
      :file-list="fileList"
      :on-success="handleOnSuccess"
      :on-change="handlePicChange"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-preview="handlePictureCardPreview"
      :before-upload="handleBeforeUpload"
      :before-remove="handleBeforeRemove"
      show-file-list
      :class="{hidess:hideUploadEdit}">
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <el-dialog
      :visible.sync="dialogVisible" :modal-append-to-body="false" >
      <img width="100%"  :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ImgUpload',
  props: {
    accept: { // 限制类型
      type: String,
      default: '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PNG,.GIF'
    },
    fileId: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: []
    },
    isBoolean: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    list: {
      handler (newVal, oldVal) {
        if (this.list.length >= 1) {
          this.fileList = newVal
          this.hideUploadEdit = true
        }else {
          this.fileList = []
          this.hideUploadEdit = false
        }
      }
    }

  },
  data() {
    return {
      uploadUrl: this.$http.adornUrl('/api-file/file/upload'),
      fileList: this.list,
      hideUploadEdit: this.isBoolean, // 是否隐藏上传按钮
      dialogImageUrl: '',
      dialogVisible: false,
      fid: this.fileId
    }
  },
  methods: {
    handleExceed() {
      this.$message.error(`只允许上传单个图片`);
    },
    handleBeforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
      }
      return isLt10M
    },
    handleOnSuccess(res, file) {
      this.$message.success("上传成功");
      this.$emit("input", res.data);
      this.fid=res.data
      file.url=this.$http.adornUrl('/api-file/file/view/file?fileId='+res.data)
    },
   /* handlePictureCardPreview() {
      if(this.fid){
        this.dialogImageUrl=this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.fid)
      }
      this.dialogVisible = true;
    },*/
    // 修改预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePicChange(file, fileList) {
      // 大于1张隐藏
      this.hideUploadEdit = fileList.length >= 1
    },
    handleRemove(file,fileList) {
      this.deleteFile(file);
    },
    // 删除文件
    deleteFile (file) {
      this.$http({
        url: this.$http.adornUrl('/api-file/file/deleteByFileId'),
        method: 'get',
        params: this.$http.adornParams({
          'fileId': this.fid,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.fid='';
          this.hideUploadEdit=false;
          this.$alert('文件已删除！','重要提示', {
            confirmButtonText: '确定'
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    handleBeforeRemove(file,fileList) {
      return new Promise((response,reject)=>{
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return response();
          })
          .catch(() => {
            return reject();
          });
      });
    },
    close() {
      this.fileList = []
      this.hideUploadEdit=false
    }
  }
}
</script>
<style>
.hidess >.el-upload--picture-card {
  display: none;
}
</style>

